<template>
    <div>
        <table>
            <tr>
                <td>分类名</td>
                <td>操作</td>
            </tr>
            <tr v-for="i in cate_list" :key="i.id">
                <td>{{i.name}}</td>
                <td><input type="button" value="展开"></td>
            </tr>
        </table>
        <!-- 分页的展示 -->
        <div><button @click="up()">上一页</button>
            <button v-for="i in page_list" @click="get_num($event)" :value="i" :key="i.l">{{i}}</button>
            <button @click="down()">下一页</button>
        </div>
        
    </div>
</template>


<script>
import axios from 'axios'
export default {
    // name:"page_test",
    data(){
        return{
            cate_list: [],
            page_list: [],
            p: '1',
            num:0
        }
    },
    methods:{
        get_cate(){
            var params = this.$route.params.id
            axios({
                url:'http://127.0.0.1:8000/app03/page/',
                method:'get',
                params:{'page_id':this.p}
            }).then(res=>{
                console.log(res.data)
                this.cate_list = res.data.cate_list
                this.page_list = res.data.page_list
                this.num = res.data.c
            })
        },
        get_num(event){
            this.p = event.target.value  // 通过事件获取button的value
            console.log(this.p)
            this.get_cate()  // 点击按钮的时候，重新调用get_goods方法
        },
        up(){
            if(this.p>1){
                this.p --
                this.get_cate()
            }
        },
        down(){
            if(this.p<this.num){
                this.p ++
                this.get_cate()
            }
        }
    },
    created(){  // 页面加载的时候，自动执行下面方法
        this.get_cate()
    }
}
</script>